<template>
  <div class="card">
    <a-form-model layout="inline">
      <a-form-model-item>
        <a-select allowClear v-model="type" style="width: 150px" placeholder="请选择类型">
          <a-select-option v-for="(item, index) in typeArrs" :key="index" :value="item.id">{{
            item.name
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="getDataList">查询</a-button>
      </a-form-model-item>
      <a-form-model-item>
        <a-button @click=";(type = ''), getDataList">重置</a-button>
      </a-form-model-item>
      <a-form-model-item>
        <a-button @click="showDioGlas()">新增</a-button>
      </a-form-model-item>
    </a-form-model>

    <a-spin :spinning="loading">
      <a-table
        bordered
        :columns="columns"
        :data-source="tableData"
        :rowKey="(record, index) => index"
        :pagination="pagination"
        @change=";(pagination = $event), getDataList()"
      >
        <span slot="image" slot-scope="text">
          <viewer :images="[text]">
            <img width="50px" height="50px" :src="text" alt="" />
          </viewer>
        </span>
        <span slot="colors" slot-scope="text">
          <div class="colors" :style="{ background: text }"></div>
        </span>
        <span slot="caozuo" slot-scope="text, record">
          <a-button type="link" @click="showDioGlas(record)">修改</a-button>
        </span>
      </a-table>
    </a-spin>
    <writeLanguageDiogla :typeArrs="typeArrs" ref="writeLanguageDiogla" @changes="getDataList"></writeLanguageDiogla>
  </div>
</template>

<script>
import { getLanguageListApi } from '@/api/dict.js'
import writeLanguageDiogla from './diogla/writeLanguageDiogla.vue'
export default {
  name: 'language',
  components: {
    writeLanguageDiogla
  },
  data() {
    return {
      loading: false,
      type: '',
      typeArrs: [{ id: '1', name: '分润' }],
      tableData: [],
      pagination: {
        total: 0,
        current: 1,
        pageSize: 50
      },
      columns: [
        {
          title: 'code',
          dataIndex: 'code',
          align: 'center'
        },
        {
          title: '名称',
          dataIndex: 'name',
          align: 'center'
        },
        {
          title: '类型',
          dataIndex: 'type',
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'caozuo' }
        }
      ]
    }
  },
  created() {
    this.getDataList()
  },
  computed: {},
  methods: {
    showDioGlas(json) {
      this.$refs.writeLanguageDiogla.openwriteLanguageDiogla(json)
    },

    async getDataList() {
      this.loading = true
      try {
        var json = {
          page: this.pagination.current,
          page_size: this.pagination.pageSize,
          brand_id: process.env.VUE_APP_BRAND_ID,
          search: {
            type: this.type
          }
        }
        const { data } = await getLanguageListApi(json)
        this.tableData = data.list
        this.pagination.total = data.total
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
